import React from 'react'
import { Button, Field, Form } from 'react-vant';
import * as jwt from 'jsonwebtoken-esm';
import { useNavigate }  from 'react-router-dom';

interface LOGINTYPE {
    username:string;
    password:string;
}
function Login() {
    const Navigate = useNavigate();
    const [form] = Form.useForm();
    const token ='Bearer ' + jwt.sign({ foo: 'bar' }, 'shhhhh');
    const onFinish = (values:LOGINTYPE) => {
        console.log(values);
        if(values.username == '666' && values.password == '666'){
            window.localStorage.setItem('token',token);
            Navigate('/');
        }else{
            form.setFieldsValue({
                username:'',
                password:'',
            })
        }
    };
    return (
        <div className='Login'>
            <Form
                form={form}
                showValidateMessage={false}
                onFinish={onFinish}
                footer={
                    <div style={{ margin: '16px 16px 0' }}>
                    <Button round nativeType="submit" type="primary" block>
                        提交
                    </Button>
                    </div>
                }
                >
                <Form.Item rules={[{ required: true, message: '请填写用户名' }]} name="username" label="用户名">
                    <Field placeholder="请输入用户名" />
                </Form.Item>
                <Form.Item rules={[{ required: true, message: '请填写密码' }]} name="password" label="密码">
                    <Field placeholder="请输入密码" />
                </Form.Item>
            </Form>
        </div>
    )
}

export default Login